<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <div id='box'>
        请输入学生姓名：<input type="text" id="'sou" v-model="ming">
        请输入学生成绩：<input type="text" id="'sou1" v-model="cj">
        <button @click="ss()">搜索</button><br>
        <button @click="add()">添加学生</button>
        <button @click="zx()">正序</button>
        <button @click="dx()">倒序</button>
        <button @click="jige()">筛选成绩及格</button>
        <button @click="bujige()">筛选成绩不及格</button>
        <table>
            <tr>
                <th colspan="4">总分：{{ zongfen }} | 平均分：{{ pingjunfen }}</th>
            </tr>
            <tr>
                <th>名字</th>
                <th>成绩</th>
                <th>操作</th>
                <th>修改分数</th>
            </tr>
            <tr v-for="(item, index) in arr" :key="item.id">
                <td>{{item.name}}</td>
                <td>{{item.chengji}}</td>
                <td><button @click="del(index)">删除</button></td>
                <td><button @click="xiu(index)">修改分数</button></td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el: '#box',
            data: {
                arr: [
                    { id: 1, name: '张三', chengji: 58 },
                    { id: 2, name: '李四', chengji: 62 },
                    { id: 3, name: '王五', chengji: 52 },
                    { id: 4, name: '赵六', chengji: 70 },
                ],
                ming: '',
                cj: null
            },
            methods: {
                // 删除
                del(index) {
                    this.arr.splice(index, 1)
                },
                // 添加
                add(id) {
                    if (this.ming && this.cj != null) {
                        this.arr.push({ name: this.ming, chengji: this.cj })
                    } else {
                        alert('请输入学生姓名')
                    }
                    this.ming = '',
                        this.cj = ''
                },
                // 搜索
                ss() {
                    this.arr = this.arr.filter(item => item.name.includes(this.ming))
                },
                // 正序
                zx() {
                    this.arr.sort((a, b) => a.chengji - b.chengji)
                },
                // 倒序
                dx() {
                    this.arr.sort((a, b) => b.chengji - a.chengji)
                },
                // 及格
                jige() {
                    this.arr = this.arr.filter(item => item.chengji >= 60)
                },
                //不及格
                bujige() {
                    this.arr = this.arr.filter(item => item.chengji < 60)
                },
                // 修改分数
                xiu(index) {
                    const newScore = prompt("请输入新的分数:", this.arr[index].chengji.toString());
                    if (newScore !== null && !isNaN(newScore)) {
                        this.arr.splice(index, 1, {
                            ...this.arr[index],
                            chengji: parseFloat(newScore)
                        });
                    }
                }
            }
        })
    </script>
</body>

</html>